<template>
	<view style="background-color: #fff;">
		<uv-sticky bgColor="#fff">
			<uv-tabs :list="tabList" :scrollable='false' @click="click"></uv-tabs>
		</uv-sticky>

		<view class="mt-1 p-6">
			<view v-for="(item,index) in list" :key="index" class="mb-6">
				<view class="flex flex-row flex-x-space-between flex-y-center mb-2">
					<view class="text-4">余额提现</view>
					<view class="text-4">￥{{item.price}}</view>
				</view>
				<view class="flex flex-row flex-x-space-between flex-y-center">
					<view class="text-1">{{item.create_at}}</view>
					<view :class="item.status==3?'text-3':'text-2'">
						{{item.status=="1"?'待审核':item.status=="2"?'审核通过':'已驳回'}}
					</view>
				</view>
				<view class="line"></view>
			</view>
		</view>
		<uni-load-more color="#007AFF" :status="status" />
	</view>
</template>

<script setup lang="ts">
	import { ref } from 'vue'
	import { onLoad, onReachBottom } from '@dcloudio/uni-app'
	import { $http } from '@/utils'
	const queryForm = ref({
		page: 1,
		limit: 20,
		type: '0'
	})
	const total = ref(0)
	const status = ref('loadMore')
	const tabList = ref([{
		name: '全部',
		type: '0'
	}, {
		name: '审核中',
		type: '1'
	}, {
		name: '审核通过',
		type: '2'
	}, {
		name: '拒绝',
		type: '3'
	}])
	onLoad(() => {
		getList()
	})
	const list = ref([])
	const getList = (() => {
		status.value = 'loading'
		$http.get('Dealer/getWithdrawal', { data: queryForm.value }).then(res => {
			total.value = res.data.total
			let data = res.data.data
			list.value.push.apply(list.value, data)
			if (list.value.length >= total.value) {
				status.value = 'noMore'
			}
		})
	})
	const click = ((e : any) => {
		queryForm.value.type = e.type
		queryForm.value.page = 1
		list.value.length=0
		getList()
	})
	//页面触底
	onReachBottom(() => {
		status.value = 'loading'
		queryForm.value.page++
		getList()
	})
</script>

<style>
	.text-1 {
		color: #999999;
		font-size: 24rpx;
	}

	.text-2 {
		color: #3B75FA;
		font-size: 24rpx;
	}

	.text-3 {
		color: #F24E52;
		font-size: 24rpx;
	}

	.text-4 {
		font-size: 32rpx;
		color: #333333;
	}

	.tab-box {
		position: fixed;
		width: 100%;
	}

	.line {
		width: 100%;
		height: 1px;
		border: 1px solid #F4F4F4;
	}
</style>